<template>
  <keep-alive>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <p>刷新次数: {{ count }}</p>
      <div style="margin-bottom: 50px">
        <van-button class="login-out" type="default" @click="loginOut"
          >退出</van-button
        >
        <div class="top-mid-view">
          <img
            class="app-logo"
            src="https://cdn-gdcws-imgs.gdcws.cn/mine/20240117/myorder.png"
          />
          <i style="margin-top: 1rem; margin-bottom: 20px">11111111111</i>
        </div>

        <van-cell-group title="常用功能">
          <van-cell
            v-for="(item, i) in section1"
            :key="i"
            :title="item.title"
            is-link
            @click="cellClick(item.path)"
          >
            <!-- 可以使用插槽来自定义内容。 -->
            <template #icon>
              <van-icon class="icon-left" :name="item.icon"></van-icon>
            </template>
          </van-cell>
        </van-cell-group>

        <van-cell-group title="更多功能">
          <van-cell
            v-for="(item, i) in section2"
            :key="i"
            :title="item.title"
            is-link
            @click="cellClick(item.path)"
          >
            <!-- 可以使用插槽来自定义内容。 -->
            <template #icon>
              <van-icon class="icon-left" :name="item.icon"></van-icon>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </van-pull-refresh>
  </keep-alive>
</template>

<script setup>
import { ref } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";

const router = useRouter();

const section1 = [
  {
    icon: "https://cdn-gdcws-imgs.gdcws.cn/mine/20240117/myorder.png",
    title: "我的订单",
    path: "/mine/myorder",
  },
  {
    icon: "https://cdn-gdcws-imgs.gdcws.cn/mine/20240117/mylike.png",
    title: "我喜欢的",
    path: "/mine/mylike",
  },
  {
    icon: "https://cdn-gdcws-imgs.gdcws.cn/mine/20240117/coupons.png",
    title: "卡券",
    path: "/mine/coupons",
  },
  {
    icon: "https://cdn-gdcws-imgs.gdcws.cn/mine/20240117/integral.png",
    title: "积分",
    path: "/mine/integral",
  },
];

const section2 = [
  {
    icon: "https://cdn-gdcws-imgs.gdcws.cn/mine/20240117/adress_icon.png",
    title: "地址管理",
    path: "/mine/adress",
  },
  {
    icon: "https://cdn-gdcws-imgs.gdcws.cn/mine/20240117/online.png",
    title: "在线客服",
    path: "tel:4006088328",
  },
  {
    icon: "https://cdn-gdcws-imgs.gdcws.cn/mine/20240117/contactus.png",
    title: "联系我们",
    path: "/mine/contactus",
  },
  {
    icon: "https://cdn-gdcws-imgs.gdcws.cn/mine/20240117/accout_icon.png",
    title: "账号与安全",
    path: "/mine/account",
  },
  {
    icon: "https://cdn-gdcws-imgs.gdcws.cn/mine/20240117/aboutus.png",
    title: "关于我们",
    path: "",
  },
];

//退出登录
const loginOut = () => {
  console.log("退出登录");
  //自定义写法
  // router.replace('/home')
  router.push("/home");
};

//cell点击事件
const cellClick = (path) => {
  console.log(path);
  window.location = path;
};

const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    showToast("刷新成功");
    loading.value = false;
    count.value++;
  }, 1000);
};
</script>

<style lang="scss" scoped>
.top-mid-view {
  display: flex;
  //容器内元素水平布局
  // justify-content: center;
  //容器内部所有元素的对齐方式
  align-items: center;
  //容器内元素的文本对齐方式
  text-align: center;
  //容器内元素的排列方向(默认横向排列)
  flex-direction: column;
  width: 100%;
  .app-logo {
    width: 30%;
    height: 30%;
    block-size: 100% 100%;
    background: no-repeat;
  }
}

.login-out {
  float: right;
  margin-top: 44px;
  margin-right: 1rem;
  border: none;
}

.icon-left {
  font-size: 20px;
  margin-right: 8px;
  margin-top: 2px;
}
</style>
